<script setup lang="ts">
import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import RequireItem from "../components/require-item.vue";
import { Storage } from "@/utils/database";
import ScrollList from "@/components/list/scroll-list.vue";
import { get_require_index } from "../../api/index";
import { throttle } from "@/utils/throttle";
const searchClick = () => {
  throttle(search2, 1000);
};
const search2 = () => {
  if (keyWord.value) {
    searchForm.value.keyword = keyWord.value;
    if (state.value == 2) {
      srollRef.value?.reload();
    } else {
      state.value = 2;
    }
  }
};
const searchForm = ref({
  type: 0,
  keyword: "",
});
const keyWord = ref("");
const state = ref(0);
const list = ref([]);
const srollRef = ref<typeof ScrollList>();

const clear = () => {
  keyWord.value = "";
  state.value = 0;
};
const history = ref<string[]>([]);

const setHistory = () => {
  const index = history.value.findIndex((item) => {
    return item == keyWord.value;
  });
  if (index !== -1) return;
  if (history.value.length >= 10) {
    history.value.pop();
  }

  history.value.unshift(keyWord.value);
  Storage.setSync("requireSearchHistory", JSON.stringify(history.value));
};
const getHistory = () => {
  const data = Storage.getSync("requireSearchHistory");
  if (data) {
    history.value = JSON.parse(data);
  }
};
const clearHistory = () => {
  history.value = [];
  Storage.setSync("requireSearchHistory", JSON.stringify(history.value));
};

const getList = (data: any) => {
  list.value = data;
  state.value = data?.length > 0 ? 2 : 1;
  setHistory();
};
const setSearch = (word: string) => {
  keyWord.value = word;
  searchClick();
};
onLoad(() => {
  getHistory();
});
</script>

<template>
  <view class="searchWrap">
    <NavBack />
    <NavBar retract>
      <view class="search">
        <input
          class="search-bar-input"
          v-model="keyWord"
          focus
          placeholder="搜索任务名称"
          @confirm="searchClick"

        />
        <view class="delete" v-if="keyWord" @click="clear">
          <image src="/package/require/static/delete2.png" mode="scaleToFill" />
        </view>
        <view class="button" @click="searchClick">搜索</view>
      </view>
    </NavBar>
    <NavSpace />
    <view class="content">
      <view class="searchHistory" v-if="state === 0">
        <view class="TitleWrap">
          <view class="title">搜索历史</view>
          <image
            src="/package/require/static/delete.png"
            mode="scaleToFill"
            @click="clearHistory"
          />
        </view>
        <view class="searchItemWrap">
          <view
            class="searchItem"
            v-for="(item, index) in history"
            :key="index"
            @click="setSearch(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>
      <view class="empty" v-if="state === 1">
        <view class="emptyItem">
          <image src="/package/require/static/empty.png" mode="scaleToFill" />
          <view class="word">暂无找到相关任务</view>
        </view>
      </view>
      <view class="listWrap" v-if="state === 2">
        <ScrollList
          v-if="state === 2"
          ref="srollRef"
          :api="get_require_index"
          pageSize="100"
          :query="searchForm"
          @getList="getList"
        >
          <template #default="{list}">
            <RequireItem v-for="item in list" :key="item.id" :data="item" />
          </template>
        </ScrollList>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import "/src/styles/mixins.scss";
page {
  overflow: hidden;
}
.searchWrap {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.search {
  margin-left: 80rpx;
  width: calc(100% - 100rpx);
  height: 68rpx;
  background: rgba($color: #ffffff, $alpha: 0.5);
  border: 1rpx solid #ff7900;
  border-radius: 34rpx;
  backdrop-filter: blur(10rpx);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: 30rpx;
  .button {
    flex-shrink: 0;
    z-index: 9999;
    margin-left: 20rpx;
    width: 96rpx;
    height: 46rpx;
    background: linear-gradient(90deg, #f09027 0%, #ff7900 100%);
    border-radius: 24rpx;
    text-align: center;
    line-height: 42rpx;
    font-size: 22rpx;
    color: #ffffff;
  }
  .search-bar-input {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    padding-left: 30rpx;
    line-height: 34rpx;
    font-size: 24rpx;
    color: #333333;
    line-height: 17px;
  }
  .delete {
    flex-shrink: 0;
    z-index: 99999;
    margin-left: 20rpx;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    @include center();
    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}
.content {
  flex-grow: 1;
  width: 100%;
  background: #f9f9f9;
  box-sizing: border-box;
  padding: 30rpx;
  overflow: scroll;
  .searchHistory {
    .TitleWrap {
      padding-right: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
      }
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
.searchItemWrap {
  padding: 30rpx 0;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: calc(100% + 20rpx);
  .searchItem {
    margin-top: 20rpx;
    margin-right: 20rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 30rpx;
    padding: 0 30rpx;

    font-size: 28rpx;
    color: #333333;
    text-align: center;
    line-height: 60rpx;
  }
}
.empty {
  .emptyItem {
    margin: 300rpx auto;
    width: 560rpx;
    image {
      width: 560rpx;
      height: 300rpx;
      opacity: 0.6;
    }
    .word {
      font-size: 28rpx;
      text-align: center;
      color: #999999;
      line-height: 40px;
    }
  }
}
</style>
